<template>
  <div class="home">
	<navBar /> 
    <div class="flex container">
	  <div>
		  <div class="newAssade">
			  
				  <el-menu :collapse="isCollapse"  :default-active="currentMenu" 
					class="el-menu-vertical-demo" >
					<div v-for="(el,i) in menuList" :key="i">
						<el-submenu :index="++i+''" v-if="el.children.length" >
						  <template slot="title">
						    <i class="iconfont" :class="el.icon"></i>
						    <span slot="title" v-if="!isCollapse">{{el.title}}</span>
							<span
								v-if="el.title=='邀请有礼'&&act_count!=0"
								class="doct">
								{{act_count}}
							</span>
						  </template>
						  <el-menu-item @click="goPath(item)" :index="item.url"  v-for="(item,ind) in el.children">
							{{item.title}}
							<span
								v-if="item.title=='邀请列表'&&act_count!=0"
								class="doct">
								{{act_count}}
							</span>
						  </el-menu-item>
						</el-submenu>
						<el-menu-item @click="goPath(el)" :index="el.url"  v-if="!el.children.length">
						  <i class="iconfont" :class="el.icon"></i>
						   <span slot="title">{{el.title}}
							 <span 
								v-if="el.title=='用户申请'&&app_count!=0"
								class="doct">
								{{app_count}}
							 </span>
							 
						   </span>
						 
						</el-menu-item>
					</div>
				  </el-menu>
			 <div >
			 		<i class=" icon" 
					   :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"
						:style="{'left':isCollapse?'20px':'80px'}"
						@click="isCollapse=!isCollapse">
					</i>
			  </div>
		  </div>
		
	  </div>
	
		  <div class="main">
			
			  <div class="container">
				 <div >
					 <tagView :currentPath="currentMenu" :tags="tags" @toChildPath="toChildPath"></tagView>
				 </div>
				
				  <div class="app-main">
					  <router-view/>	 
				  </div>
			  </div>
		  </div>
	   
    </div>
  </div>
</template>


<script>
import tagView from './child/tagView.vue'
import menuList from './child/menu.js'
import navBar from './child/Navbar.vue'
export default {
  data() {
    return {
		currentMenu:"",
		tags:[],
		menuList:[],
		isCollapse:false
    };
  },
  components:{
	  tagView,navBar
	  // navBar,tagView
  },
  computed:{
	 app_count:{
		  get(){
			 return this.$store.state.settings.app_count
		  }
	 },
	 act_count:{
		  get(){
			 return this.$store.state.settings.act_count
		  }
	 },
  },
  created() {
	this.menuList = menuList.menuList
  },
  watch: {
     $route(to, from) {
		 this.currentMenu = to.path;
		  this.getNotReadyNumber()
     }
  },
  mounted() {
	  this.getUrl()
	  this.getNotReadyNumber()
  },
  methods: {
	  getNotReadyNumber(){
		  this.$post('/user/getNotReadyNumber',{},res=>{
		  	  this.$store.dispatch('settings/changeSetting', {
		  		key: 'app_count',
		  		value: res.data.data.app_count
		  	  })
		  	  this.$store.dispatch('settings/changeSetting', {
		  		key: 'act_count',
		  		value: res.data.data.act_count
		  	  })
		  })
	  },
	  getUrl(){
	      let currentUrl = window.location.href;
	      this.currentMenu = currentUrl.split('#')[1];
	  },
	  goPath(item){
		 let bool =this.tags.some((el,i)=>{
		 	 return el.title == item.title
		 })
		 if(!bool) this.tags.push(item)
		  this.$router.push({path:item.url})
	  },
	  toChildPath(item){
		  let bool =this.tags.some((el,i)=>{
		  	 return el.title == item.title
		  })
		  if(!bool) this.tags.push(item)
		   this.$router.push({path:item.url})
	  },
  }
};
</script>
<style lang="scss">
	.doct{
		border-radius: 10px;padding: 0 10px;
		background: red;color: #fff;display: inline-block;
		min-width: 20px;height: 20px;text-align: center;
		position: relative;
		top: -10px;
		line-height: 20px;
	}
	.el-menu-vertical-demo:not(.el-menu--collapse) {
	    width: 200px;
	    min-height: 400px;
	  }
	 .el-aside{
		  height: calc(100vh - 60px);
	 } 
	.app-main{
		position: relative;
	}
	.newAssade{
		.icon{
		  font-size: 20px;
		  margin-top: -2px;
		  margin-right: 20px;
		  cursor: pointer;
		  position: absolute;
		  bottom: 20px;
		  transition: all 0.3s;
		}
		height: calc(100vh - 100px);
		overflow-y: scroll;
		
	}
	
	
	.fade-enter {
	 animation:mymove 3s linear;
	}
	.el-menu{
		border-right: none;
	}
	.newAssade::-webkit-scrollbar{
		width: 0.1px;
	}
	
	.main{
		   height: calc(100vh - 60px);
		   flex: 1;
		   background-color: rgb(245,245,245);
		   overflow-x: scroll;
		   overflow-y: scroll;
		   .container{
			   padding: 0px 20px;
		   }
		   
	   }
	

</style>
